<%@ include file="/WEB-INF/views/include.jsp"%>
<div id="modal-edit-element-contenttype" class="modal hide fade">
	<div class="modal-header">
		<a href="#" class="close">&times;</a>
		<h3>Edit Element Content Type</h3>
	</div>
	<input type="hidden" id="hiddenId" name="hiddenId" value="" />
	<input type="hidden" id="hiddenCode" name="hiddenCode" value="" />
	<input type="hidden" id="hiddenDivTab" name="hiddenDivTab" value="" />
	<div class="modal-body">
		    <form>
        		<fieldset>
				        <div class="clearfix">
				            <label for="nameElement">Name Element</label>
				            <div class="input">
				              <input type="text" size="30" name="nameElement" id="nameElement" class="xlarge">
				            </div>
				          </div>
			        <div class="clearfix">
			            <label for="codeElement">Code</label>
			            <div class="input">
			              <input type="text" size="30" name="codeElement" id="codeElement" class="xlarge">
			            </div>
			          </div>
			    <div class="clearfix">
	            	<label for="mediumSelect">Select</label>
		            <div class="input">
		              <select id="mediumSelect" name="mediumSelect" class="medium">
		                <option>Text Field</option>
		                <option>Text Area</option>
		                <option>Rich Text</option>
		                <option>Numerical</option>
		                <option>Email Address</option>
		                <option>Web Address</option>
		                <option>File</option>
		                <option>Image</option>
		                <option>Date</option>
		              </select>
		            </div>
	         	</div>
	         	</fieldset>
	         </form>
	</div>
	<div class="modal-footer">
		<a href="#" onclick="closeModel('#modal-edit-element-contenttype')" class="btn danger">Close</a>
		<a href="#" onclick="return editElementToForm();" class="btn primary">Edit</a>
	</div>
</div>
<script type="text/javascript">

		//edit element content type to Form in tab Edit/Add
		function editElementToForm(){
			var bValid = true;
			divTab = jQuery('input[name=hiddenDivTab]').val();
			bValid = bValid && checkValue(jQuery('#modal-edit-element-contenttype #nameElement'));
			bValid = bValid && checkValue(jQuery('#modal-edit-element-contenttype #codeElement'));
			bValid = bValid && checkCodeExistInEdit(divTab, jQuery('#modal-edit-element-contenttype #codeElement'));
			if(bValid){
				code = jQuery('#modal-edit-element-contenttype #codeElement').val();		
				name = jQuery('#modal-edit-element-contenttype #nameElement').val();
				type = jQuery("#modal-edit-element-contenttype #mediumSelect :selected").text();
				deleteEle = "<a href='#' onclick='deleteElement(\"" + divTab + "\",\""  + code + "\")'><fmt:message key='button.delete' /></a>";
				editEle = "<a href='#' onclick='editElement(\"" + divTab + "\",\"" + code + "\")'><fmt:message key='button.edit' /></a>";
				idDiv = jQuery('input[name=hiddenId]').val();
				jQuery(idDiv).replaceWith( "<tr class='" + code + "'>" +
						"<th class='code'>" + code + "</th>" + 
						"<th>" + name + "</th>" + 
						"<th>" + type + "</th>" +
						"<th>" +  deleteEle  + "  " + editEle + "</th>" +
					"</tr>" );
				closeModel('#modal-edit-element-contenttype');
			}
			return bValid;
		}

		function checkCodeExistInEdit(divTab, obj){
			var flagCode = false;
			if(!checkCodeInEdit(divTab, obj)){
				if(obj.val() == jQuery('input[name=hiddenCode]').val()){
					flagCode = true;
				}else{
					obj.parent().parent().addClass("error" );
			    	obj.parent().append('<span class="help-inline">Code exists</span>')
				}
			}else{
				flagCode = true;
			}
			return flagCode;
		}

		function checkCodeInEdit(divTab, obj){
			var flag = true;
			obj.next().remove();
			divCode = divTab + " tbody th.code";
			jQuery(divCode).each(function(){
			    if(jQuery(this).text() == obj.val()){
			    	flag = false;
			    	return flag;
				} else {
					obj.parent().parent().removeClass("error");
					flag = true;
				}
			})
			return flag;
		}
</script>

